<template>
  <el-card class="box-card">
    <template #header>
      <span class="title">个人信息</span>
    </template>

    <el-row :gutter="24">
      <!-- 1. 账号信息 -->
      <el-col :span="8">
        <el-form label-width="80px">
          <el-form-item label="账号">{{ payload.username }}</el-form-item>
          <el-form-item label="角色">{{ roleLabel }}</el-form-item>
        </el-form>
      </el-col>

      <!-- 2. 所属门店（店员/店长才显示） -->
      <el-col :span="8" v-if="payload.storeId">
        <el-form label-width="80px">
          <el-form-item label="门店">{{ payload.storeName }}</el-form-item>
          <el-form-item label="门店ID">{{ payload.storeId }}</el-form-item>
        </el-form>
      </el-col>

      <!-- 3. 修改密码 -->
     <el-button type="primary" @click="pwdDlg.open()">修改密码</el-button>
<PasswordDialog ref="pwdDlg" />
    </el-row>
  </el-card>
</template>

<script setup lang="ts">
import { computed, reactive, ref } from 'vue'
import { jwtDecode } from 'jwt-decode'
import { useAuthStore } from '@/stores/auth'
import { ElMessage } from 'element-plus'
import { updatePassword } from '@/api/auth' // 简单封装 axios
import PasswordDialog from '@/components/PasswordDialog.vue'

interface JwtPayload{
  username:string
  role:1|2|3|4
  storeId?:number
  storeName?:string
}

const auth = useAuthStore()
const payload = computed<JwtPayload>(() => auth.token ? jwtDecode<JwtPayload>(auth.token) : {} as JwtPayload)
const roleLabel = computed(()=> ['顾客','服务员','店长','管理员'][payload.value.role-1])
const pwdDlg = ref()
const pwdForm = reactive({ oldPassword:'', newPassword:'' })
const pwdRef = ref()

async function submitPwd(){
  await pwdRef.value.validate()
  await updatePassword(pwdForm)
  ElMessage.success('密码已更新，请重新登录')
  auth.clear()
  location.reload()
}
</script>

<style scoped>
.title{font-size:16px;font-weight:600}
</style>